;(function(){
    zUI.select = {
        loadListTran:function(set){
            var dom = zUI.dom;
            var util = zUI.util;
            var elem = set.elem||'';
            var $obj = $(elem);
            var loadOne = function(tab){
                var left = tab.querySelector('.list-box');
                var right = tab.querySelectorAll('.list-box')[1];
                var leftUl = left.querySelector('.left');
                var rightUl = right.querySelector('.right');
                var optTran = dom.createElem({name:'div',clazz:'list-tool'});
                $(left).after(optTran);
                var optTranDiv = dom.createElem({name:'div',clazz:'list-tool-indiv'});
                optTran.appendChild(optTranDiv);
                var optTranDivs = dom.createElem({name:'div'});
                optTranDiv.appendChild(optTranDivs);
                var ir = dom.createElem({name:'i',clazz:'zUI-icon fa fa-angle-double-right'});
                var iu = dom.createElem({name:'i',clazz:'zUI-icon fa fa-angle-double-up'});
                var id = dom.createElem({name:'i',clazz:'zUI-icon fa fa-angle-double-down'});
                var il = dom.createElem({name:'i',clazz:'zUI-icon fa fa-angle-double-left'});
                optTranDivs.appendChild(ir);
                optTranDivs.appendChild(iu);
                optTranDivs.appendChild(id);
                optTranDivs.appendChild(il);
                var goRight,goLeft,goUp,goDown;
                var click = function(){
                    if($(this.parentNode).hasClass('left')){
                        $(rightUl.querySelectorAll('li.active')).removeClass('active');
                    }else{
                        $(leftUl.querySelectorAll('li.active')).removeClass('active');
                    }
                    if($(this).hasClass('active')){
                        $(this).removeClass('active');
                    }else{
                        $(this).addClass('active');
                    }
                    setColor();
                    setColor2();
                }
                var setColor = function(){
                    var hasL = leftUl.querySelectorAll('li.active').length > 0;
                    var hasR = rightUl.querySelectorAll('li.active').length > 0;
                    if(!hasL){
                        $(ir).addClass('zUI-gray');
                    }else{
                        $(ir).removeClass('zUI-gray');
                    }
                    if(!hasR){
                        $(il).addClass('zUI-gray');
                    }else{
                        $(il).removeClass('zUI-gray');
                    }
                }
                var setColor2 = function(){
                    var lis = tab.querySelectorAll('li.active');
                    if(lis.length == 0){
                        $(iu).addClass('zUI-gray');
                        $(id).addClass('zUI-gray');
                    }else{
                        if(lis.length == 1 && lis[0].previousElementSibling == null){
                            $(iu).addClass('zUI-gray');
                        }else{
                            $(iu).removeClass('zUI-gray');
                        }
                        if(lis.length == 1 && lis[0].nextElementSibling == null){
                            $(id).addClass('zUI-gray');
                        }else{
                            $(id).removeClass('zUI-gray');
                        }
                    }

                }
                goRight =  function () {
                    var lis = leftUl.querySelectorAll('li.active');
                    if(lis.length > 0){
                        util.each(lis,function(i,o){
                            var newLi = o.cloneNode(true);
                            $(o).remove();
                            rightUl.appendChild(newLi);
                            newLi.onclick = click;
                        });
                        rightUl.scrollTop = rightUl.offsetHeight;
                    }
                    setColor();
                    setColor2();
                }
                goLeft =  function () {
                    var lis = rightUl.querySelectorAll('li.active');
                    if(lis.length > 0){
                        util.each(lis,function(i,o){
                            var newLi = o.cloneNode(true);
                            $(o).remove();
                            leftUl.appendChild(newLi);
                            newLi.onclick = click;
                        });
                        leftUl.scrollTop = leftUl.offsetHeight;
                    }
                    setColor();
                    setColor2();
                }
                goUp =  function () {
                    var lis = tab.querySelectorAll('li.active');
                    var hasL = leftUl.querySelectorAll('li.active').length > 0;
                    var hasR = rightUl.querySelectorAll('li.active').length > 0;
                    var lm = false,rm=false;
                    util.each(lis,function(i,o){
                        var pre = o.previousElementSibling;

                        if(pre != null){
                            var no = dom.swapNode(pre,o);
                            o.onclick = click;
                            no.onclick = click;
                            if(!lm&& hasL){
                                leftUl.scrollTop = leftUl.scrollTop-$(o).outerHeight();
                                lm = !lm;
                            }
                            if(!rm&& hasR){
                                rightUl.scrollTop = leftUl.scrollTop-$(o).outerHeight();
                                rm = !rm;
                            }
                        }
                    });
                    setColor2();
                }
                goDown =  function () {
                    var lis = tab.querySelectorAll('li.active');
                    var lm = false,rm=false;
                    var hasL = leftUl.querySelectorAll('li.active').length > 0;
                    var hasR = rightUl.querySelectorAll('li.active').length > 0;
                    for (var i = lis.length -1; i >= 0 ; i--) {
                        var nex = lis[i].nextElementSibling;
                        if(nex != null){
                            var o = dom.swapNode(nex,lis[i]);
                            lis[i].onclick = click;
                            nex.onclick = click;
                            o.onclick = click;
                            if(!lm&& hasL){
                                leftUl.scrollTop = leftUl.scrollTop+$(o).outerHeight();
                                lm = !lm;
                            }
                            if(!rm&& hasR){
                                rightUl.scrollTop = leftUl.scrollTop+$(o).outerHeight();
                                rm = !rm;
                            }
                        }
                    }
                    setColor2();
                }
                ir.onclick = goRight;
                il.onclick = goLeft;
                iu.onclick = goUp;
                id.onclick = goDown;
                var liList = tab.querySelectorAll('li');
                util.each(liList,function(i,o){
                    o.onclick = click;
                });
                setColor();
                setColor2();
            }
            util.each($obj,function(i,o){
                loadOne(o);
            });
        },
        getListTranData: function(elem){
            var obj = zUI.dom.get(elem);
            if(zUI.dom.hasClass(obj,'zUI-list-tran')){
                var lis = obj.querySelectorAll('.list-box .left li');
                var ris = obj.querySelectorAll('.list-box .right li');
                var l = [],r=[];
                zUI.util.each(lis,function(i,o){
                    l.push(o.getAttribute('list-tran-data'));
                });
                zUI.util.each(ris,function(i,o){
                    r.push(o.getAttribute('list-tran-data'));
                });
                return {l:l,r:r};
            }
            return null;
        },
        loadSlider: function (set) {
            var elem = set.elem||'';
            var format = set.format||'';
            var start = parseInt(set.start)||0;
            var end = parseInt(set.end)||100;
            var ds = end - start;
            var step = parseInt(set.step)||1;
            if(start<0||end<=0 ||ds <= 0){
                start = 0;end=100;
            }
            if(step> ds){
                step = 1;
            }
            var dom = zUI.dom;
            var items = $(elem);
            var loadOne = function(one,o){
                //console.log(o);
                var disabled = dom.hasClass(o,'disabled');
                var maxWidth = $(o).outerWidth();
                var nowV = parseInt(o.getAttribute('zUI-slider-data'))||start;
                if(nowV<start || nowV > end){
                    nowV = start;
                }
                var now = o.querySelector('.zUI-slider-now');
                var bar = now.querySelector('.zUI-slider-bar');
                dom.addClass(now,'no-select');
                var tip = dom.createElem({name:'div',clazz:'zUI-slider-tip zUI-hide'});
                var tn = nowV;
                if(zUI.util.isF(format)){
                    tn = format(nowV);
                }
                tip.appendChild(document.createTextNode(tn));
                document.body.appendChild(tip);
                var showTip = function(x){
                    //console.log(x);
                    var r1 = o.offsetTop - $(tip).outerHeight()-14 - $(window).scrollTop();
                    tip.style.left = x+'px';
                    tip.style.top = r1+'px';
                }
                now.style.width = maxWidth* ((nowV-start)/ds) +'px';
                if(!disabled){
                    bar.onmousedown=function(e){
                        dom.addClass(tip,'zUI-show');
                        var e = e || window.event;
                        var state = 1;
                        var x0 = e.clientX;
                        var y0 = e.clientY;
                        var startX = o.offsetLeft+ $(now).outerWidth() - $(tip).outerWidth()/2;

                        showTip(startX);
                        var w = $(now).outerWidth();
                        var f1 = function(e1){
                            e1 = e1 || window.event;
                            if(state == 1){
                                var moveX = w + e1.clientX - x0;
                                var mark = true;
                                if(moveX < 0){
                                    moveX = 0
                                    mark = false;
                                }
                                if(moveX > maxWidth){
                                    mark = false;
                                    moveX = maxWidth
                                }
                                if(mark){
                                    showTip(startX+e1.clientX - x0);
                                }

                                var per = parseInt(moveX/maxWidth*ds);
                                if(per%step == 0 || per == 0 || per == 100){
                                    var rv = start+per;
                                    now.style.width = (maxWidth*per/ds) + 'px';
                                    o.setAttribute('zUI-slider-data',rv);
                                    var html = rv;
                                    if(zUI.util.isF(format)){
                                        html = format(rv);
                                    }
                                    tip.innerHTML = html;
                                }

                            }
                        }
                        var f2 = function(e2){
                            state = 0;
                            dom.addClass(tip,'zUI-hide');
                            dom.removeClass(tip,'zUI-show');
                            dom.removeEvent(document,"mousemove",f1);
                            dom.removeEvent(document,"mouseup",f2);
                        }
                        document.onmousemove = f1;
                        document.onmouseup = f2;

                    };

                }
                bar.onmouseover = function(){
                    if(!dom.hasClass(tip,'zUI-show')){
                        dom.removeClass(tip,'zUI-hide');
                    }
                    var startX = o.offsetLeft+ $(now).outerWidth() - $(tip).outerWidth()/2;
                    showTip(startX);
                };
                bar.onmouseout = function(){
                    if(!dom.hasClass(tip,'zUI-show')){
                        dom.addClass(tip,'zUI-hide');
                    }
                };


            }
            zUI.util.each(items,function(i,o){
                loadOne(i,o);
            });
        }
    }
}());